<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.4.1.min (1).js"></script>
   <style>
    body{
        background-color: rgb(29, 29, 29);
    }
    #one{
        width: 302px;
        height: 900px;
        border: solid  2px black;
        position: absolute;
        margin-top: 30px;
        margin-left:-9px;
        background-color: rgb(47, 47, 47);
    }
    #one * {
        width: 294px;
        height: 50px;
        border-bottom: solid 1px white;
        margin-top: 55px;
        margin-left: 0px;
        font-size: 30px;
        padding-top: 15px;
        line-height: 25px;
        text-align: center;
        color: white;
    }
    img{
        width:1150px;
        height: 800px;
        position: absolute;
        margin-left: 400px;
        margin-top: 70px;
        border: solid 2px ;
    }
   </style>
</head>
<body>
    <div id="one">
        <div id="three"  class="two">贵州</div>
        <div id="four"  class="two">江苏</div>
        <div id="five"  class="two">新疆</div>
        <div id="six" class="two">成都</div>
        <div id="seven" class="two">重庆</div>
        <div id="eight"  class="two">杭州</div>
        <div id="nine"  class="two">苏州</div>
    </div>
    <img src="img/6.jpg" alt="">
</body>
<script>
    $(document).ready(function(){
        $(".two").click(function(){
            $(this).css({backgroundColor:"red",marginLeft:"2px"})
        })
        $("#three").click(function(){
            $("img").prop("src","img/23.jpg")
        })
        $("#four").click(function(){
            $("img").prop("src","img/22.jpg")
        })
        $("#five").click(function(){
            $("img").prop("src","img/21.webp")
        })
        $("#six").click(function(){
            $("img").prop("src","img/20.jpg")
        })
        $("#seven").click(function(){
            $("img").prop("src","img/19-C.webp")
        })
        $("#eight").click(function(){
            $("img").prop("src","img/18.jpg")
        })
        $("#nine").click(function(){
            $("img").prop("src","img/17.webp")
        })
        
        $(".two").hover(function(){
            $(this).css({border:"solid 4px white"})
        },
        function(){
            $(this).css({borderTop:"none",borderRight:"none",
            borderLeft:"none",borderBottom:"solid 1px white",
            backgroundColor:"transparent",marginLeft:"1px"})//用transparent清空背景
        },
        $(".two").mousedown(function(){$(this).css({border:"#0099FF 3px solid"})}),
        
    )
    })
</script>
</html>